<template>
  <div class="home-goods-list">
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <van-list
        :finished="is_finish"
        class="list-box"
        finished-text="没有更多了"
        @load="loadHandler" >
        <van-cell class="item-box" v-for="item in goodsList" :key="item.proid">
          <li>
            <img :src="item.img1" alt="">
            <p class="text">{{ item.proname }}</p>
            <p class="price">￥ {{ item.originprice.toFixed(2) }}</p>
          </li>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { getGoodsList } from '@/apis/goods'

// 准备商品列表的接口
interface Goods {
  proid: string
  img1: string
  proname: string
  originprice: number
}

// 提前准备商品列表数据
const goodsList = ref<Goods[]>([])

// 准备一个变量表示当前第几页
const count = ref<number>(0)

// 准备一个变量, 表示数据是否完结
const is_finish = ref<boolean>(false)

// 准备一个变量表示开关
const flag = ref<boolean>(true)

// 是否处于加载中的状态
const loading = ref<boolean>(false)

// 下拉刷新的函数
const onRefresh = () => {
  // 改变 count 为 1
  // 因为真实开发是大数据测算以后的数据
  // 我们的数据是假的, 每次固定为第一页
  // 咱们用一个随机数模拟
  const num = Math.floor(Math.random() * 5) + 1
  // 判断: 如果随机出来的数字和 count 一致, 再来一遍
  if (num === count.value) {
    onRefresh()
    return
  }

  // 注意: 咱们为了模拟效果, 每次让 count 改变为 1 ~ 5 的随机数
  count.value = num

  // 注意: 应该把原始数组清空
  goodsList.value = []

  // 注意: 因为之前有可能到底了, 我们一旦刷新以后, 需要把 is_finish 变成 false
  is_finish.value = false
}

// 把请求商品列表写成一个函数
const getList = async () => {
  const res = await getGoodsList(count.value, 10)

  // 如果 res.data 是一个空数组
  // 或者 res.data 不够一页显示的条数
  // 表示不会再有下一页了
  // 需要让 is_finish 为 true
  if (res.data.length < 10) {
    is_finish.value = true
    return
  }

  // goodsList 变量赋值
  // 应该是把本次的内容追加到 goodsList 这个数组内
  goodsList.value.push(...res.data)

  // 再次打开开关
  flag.value = true

  // 下拉刷新完毕
  loading.value = false
}

// 准备一个到底触发的函数
const loadHandler = () => {
  if (!flag.value) return

  flag.value = false

  count.value++
}

// 当 count 发生变化的时候, 需要执行 getList
watch(count, () => getList())

// 先要请求数据
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.home-goods-list {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 10px 0 10px;

  .list-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    > .item-box {
      width: 48%;
      border-radius: 10px;
      background-color: #fff;
      overflow: hidden;
      margin-bottom: 10px;
  }

  li {
    > img {
        width: 100%;
      }

      > .text {
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin: 5px 0;
        padding: 0 10px;
      }

      > .price {
        color: red;
        font-weight: 700;
        padding: 0 5px;
      }
    }
  }

}
</style>
